<template>
    <div class="views-dianyingxinxi-index">
        <div>
            <e-container>
                <div class="title-sn-title-shinei">
                    <div class="sn-title">
                        <span> 电影信息列表 </span>
                    </div>
                    <div class="sn-content">
                        <form action="javascript:;" @submit="searchSubmit" class="form-search">
                            <table class="jd-search">
                                <tbody>
                                    <tr>
                                        <td class="label">电影名称</td>
                                        <td>
                                            <el-input type="text" style="width: 150px" v-model="search.dianyingmingcheng" placeholder="请输入关键词"> </el-input>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="label">分类</td>
                                        <td>
                                            <p class="search-radio">
                                                <a href="javascript:;" @click="selectRadio('fenlei','')" :class="{active:!search.fenlei}">全部</a>
                                                <a
                                                    href="javascript:;"
                                                    v-for="r in mapdianyingfenlei1"
                                                    @click="selectRadio('fenlei',r.id)"
                                                    :class="{active:search.fenlei == r.id}"
                                                    v-text="r.fenleimingcheng"
                                                >
                                                </a>
                                            </p>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="label">电影类型</td>
                                        <td>
                                            <p class="search-radio">
                                                <a href="javascript:;" @click="selectRadio('dianyingleixing','')" :class="{active:!search.dianyingleixing}">全部</a>
                                                <a href="javascript:;" :class="{active:search.dianyingleixing == '已上映'}" @click="selectRadio('dianyingleixing','已上映')"
                                                    >已上映</a
                                                >
                                                <a href="javascript:;" :class="{active:search.dianyingleixing == '即将上映'}" @click="selectRadio('dianyingleixing','即将上映')"
                                                    >即将上映</a
                                                >
                                            </p>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="label">上映地区</td>
                                        <td>
                                            <el-input type="text" style="width: 150px" v-model="search.shangyingdiqu" placeholder="请输入关键词"> </el-input>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td></td>
                                        <td>
                                            <el-button type="success" @click="searchSubmit">搜索</el-button>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </form>

                        <el-row :gutter="30">
                            <el-col v-for="r in lists" :md="6" :key="r.id" style="margin-bottom: 20px">
                                <article class="single_product v-module-xiezi">
                                    <figure>
                                        <div class="product_thumb" @click="$goto('/dianyingxinxi/detail?id='+r.id)">
                                            <div class="label_product"></div>
                                            <e-img class="primary_img" :src="r.dianyinghaibao" pb="100" :is-scale="false" />
                                        </div>
                                        <figcaption class="product_content">
                                            <h4 class="product_name"><a href="javascript:;" @click="$goto('/dianyingxinxi/detail?id='+r.id)"> {{ r.dianyingmingcheng }}</a></h4>
                                            <div class="price_box">
                                                <span class="current_price" v-if="r.yingpiaojiage">售价：{{ r.yingpiaojiage }}</span>
                                            </div>
                                            <div class="add_to_cart">
                                                <a href="javascript:;" title="查看详情" @click="$goto('/dianyingxinxi/detail?id='+r.id)">查看详情</a>
                                            </div>
                                        </figcaption>
                                    </figure>
                                </article>
                            </el-col>
                        </el-row>

                        <div style="margin-top: 10px; text-align: center">
                            <el-pagination
                                @current-change="loadList"
                                v-model:current-page="search.page"
                                v-model:page-size="search.pagesize"
                                @size-change="sizeChange"
                                layout="total, sizes, prev, pager, next, jumper"
                                :total="totalCount"
                            >
                            </el-pagination>
                        </div>
                    </div>
                </div>
            </e-container>
        </div>
    </div>
</template>

<script setup>
    import http from "@/utils/ajax/http";
    import DB from "@/utils/db";
    import router from "@/router";

    import { ref, reactive, watch, unref, onBeforeMount } from "vue";
    import { useRoute } from "vue-router";
    import { session } from "@/utils/utils";
    import { canDianyingxinxiSelect, useDianyingxinxiSelect, canDianyingxinxiDelete } from "@/module";
    import { extend } from "@/utils/extend";
    import { ElMessageBox, ElMessage } from "element-plus";

    const route = useRoute();
    const search = reactive({
        dianyingbianhao: "",
        dianyingmingcheng: "",
        fenlei: "",
        dianyingleixing: "",
        shangyingdiqu: "",
        yuyan: "",
        nianfen: "",
        shifoushangjia: "",
        page: 1, // 当前页
        pagesize: 10, // 每页行数
        orderby: "id", // 排序字段
        sort: "desc", // 排序类型
    });
    extend(search, route.query);
    // 链接参数变化时更新这些内容
    watch(
        () => route.query,
        () => {
            extend(search, route.query);
            loadList(1);
        },
        { deep: true }
    );

    // 总行数
    const totalCount = ref(0);
    // 列表数据
    const lists = ref([]);
    // 加载状态
    const loading = ref(false);

    // 排序操作
    const sortChange = (e) => {
        console.log(e);
        if (e.order == null) {
            search.orderby = "id";
            search.sort = "desc";
        } else {
            search.orderby = e.prop;
            search.sort = e.order == "ascending" ? "asc" : "desc";
        }
        loadList(1);
    };
    // 设置页数多少
    const sizeChange = (e) => {
        search.pagesize = e;
        loadList(1);
    };

    // 加载电影信息列表方法
    const loadList = (page) => {
        // 加载
        if (unref(loading)) return;
        loading.value = true;
        search.page = page;

        http.post("/api/dianyingxinxi/selectPages", search).then(
            (res) => {
                loading.value = false;
                if (res.code == 0) {
                    var data = res.data;
                    lists.value = data.lists.records;
                    totalCount.value = data.lists.total;
                }
            },
            (err) => {
                ElMessage.error(err.message);
            }
        );
    };

    onBeforeMount(() => {
        loadList(1);
    });
    const selectRadio = (target, name) => {
        search[target] = name;
        searchSubmit(1);
    };

    const searchSubmit = (page = 1) => {
        loadList(page);
    };
    const mapdianyingfenlei1 = DB.name("dianyingfenlei").field("id,fenleimingcheng").order("id desc").selectRef();
</script>

<style scoped lang="scss">
    .views-dianyingxinxi-index {
    }
</style>
